<template>
  <base-breadcrumb>
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <a-card :bordered="false">
      <list-table
        ref="table"
        :columns="columns"
        :request="loadData"
        :isScrollX="false"
      >
        <!-- 新增风险按钮 -->
        <template
          slot="prefix"
        >
          <a-button
            v-btn-permission="'stm_012_add_01'"
            type="primary"
            icon="plus"
            @click="visible = true;state = 0;"
          >
            新增
          </a-button>
        </template>
        <!-- 序号 -->
        <span
          slot="index"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>

        <!-- 操作栏 -->
        <template
          slot="operation"
          slot-scope="text, record"
        >
          <MoreButton>
            <a v-btn-permission="'stm_012_loo_03'" @click="chooseRow = record;visible = true;state = 2;">查看</a>
            <a v-btn-permission="'stm_012_edi_02'" @click="chooseRow = record;visible = true;state = 1;">编辑</a>
            <a
              v-btn-permission="'stm_012_clo_05'"
              v-if="record.stop === 1"
              style="color: red"
              @click="toggle(record)"
            >停用 </a>
            <a
              v-btn-permission="'stm_012_ope_06'"
              v-if="record.stop === 0"
              @click="toggle(record)"
            >启用 </a>
            <a v-btn-permission="'stm_012_del_04'" @click="handleDel(record.id)">删除 </a>
          </MoreButton>
        </template>
      </list-table>
    </a-card>
    <add
      :state="state"
      :form="chooseRow"
      :visible.sync="visible"
      @cancel="visible = false;chooseRow = null;state=0;"
      @ok="$refs.table.getData(null,true);"
    />
  </base-breadcrumb>
</template>

<script>
import Api from '@/api/science/base/quantitativeResponsibilityLetter'
import add from './add'

export default {
  name: 'RiskListIndex',
  components: {
    add
  },
  data() {
    return {
      state: 1,
      visible: false, // 弹窗显隐控件
      chooseRow: null, // 选中项
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          fixed: 'left',
          width: 70,
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '目标量化要求',
          dataIndex: 'demand'
        },
        {
          title: '提炼指标',
          dataIndex: 'refiningTypeName'
        },
        {
          title: '目标量化对象',
          dataIndex: 'quantizationObjectTypeName'
        },
        {
          title: '目标量化类型',
          dataIndex: 'quantizationTypeName',
          width: 140
        },
        // {
        //   title: '内容',
        //   dataIndex: 'content'
        // },
        // {
        //   title: '层级',
        //   dataIndex: 'levelTypeName'
        // },
        {
          title: '操作',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ], // 表头配置项
      searchArr: [
        {
          name: '目标量化要求',
          type: 'input',
          value: 'demand'
        },
        {
          name: '提炼指标',
          type: 'select',
          value: 'refiningTypeId',
          data: [],
          request: () => Api.typesLabelList({ type: 1 })
        }, {
          name: '目标要求类型',
          type: 'select',
          value: 'quantizationTypeId',
          data: [],
          request: () => Api.typesLabelList({ type: 3 })
        },
        {
          name: '目标量化对象',
          type: 'select',
          value: 'quantizationObjectId',
          data: [],
          request: () => Api.typesLabelList({ type: 2 })
        },
        // {
        //   name: '层级',
        //   type: 'select',
        //   value: 'levelTypeId',
        //   data: [],
        //   request: () => Api.typesLabelList({ type: 4 })
        // }
      ], // 搜索表单配置项
      loadData: async (params) => {
        let searchData = Object.assign(params, {query:this.queryParam})
        return Api.queryList(searchData)
      }, // 表格请求
      queryParam: {} // 搜索参数集
    }
  },
  methods: {
    async toggle(record) {
      if (record.stop === 1) {
        this.$submitConfirm(async () => {
          let res = await Api.changeStop({ id: record.id })
          if (res.code === this.SUCCESS_CODE) {
            this.$refs.table.getData(null, true)
          }
        }, '确定是否停用？')
      } else {
        let res = await Api.changeStop({ id: record.id })
        if (res.code === this.SUCCESS_CODE) {
          this.$refs.table.getData(null, true)
        }
      }
    },
    /**
     * @description: 搜索
     * @param {*} val：搜索参数对象
     */
    search(val = {}) {
      this.queryParam = val
      this.$refs.table.getData(null, true)
    },
    /**
     * @description: 删除单行
     * @param {*} id：业务id
     */
    handleDel(id) {
      this.$delList3(
        Api.deleteById,
        () => {
          this.search()
        },
        { id }
      )
    },
    /**
     * @description: 操作栏
     * @param {*} record：列表操作项
     * @param {*} step：1 编辑，2 处理
     * @param {*} isComment： 1 是否是批注
     */
    handleEdit(record = {}, step, isComment = 0) {
      this.$router.push({
        path: 'add',
        query: {
          id: (record && record.id) || '',
          step,
          isComment
        }
      })
    }
  }
}
</script>
